<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>帽儿山生态服务评估系统后台</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .el-input__inner {
            width: auto
        }

        .space {

            padding: 0 30px;
            width: 1200px;
            margin: 20px auto;
        }

        .table {
            width: 1200px;
            margin: 0 auto;
        }

        .page {
            margin-top: 20px;
            width: 1200px;
            text-align: right;
        }

        .el-pagination__editor.el-input {
            width: 68px;
        }
        .el-pagination__editor.el-input .el-input__inner{
            width: inherit;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#001529"
            text-color="#fff" active-text-color="#fff">
            <el-menu-item index="0" style="font-size: 20px;">帽儿山生态服务评估系统后台</el-menu-item>
            <el-menu-item index="1">管理员管理</el-menu-item>
            <el-submenu index="2" style="float: right;">
                <template slot="title">{{ name }}</template>
                <el-menu-item index="2-1" @click='logout'>退出</el-menu-item>
            </el-submenu>
        </el-menu>
        <div class="space">
            <el-form ref="form" :model="form" label-width="120px" :inline="true">
                <el-form-item label="联系信息：">
                    <el-input v-model="form.input"></el-input>
                </el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="warning" style="float:right" @click="deletefn">批量删除</el-button>
                <el-button type="danger" style="float:right" @click="add">添加人员</el-button>
            </el-form>

        </div>
        <div class="table">
            <el-table :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="username" label="账号" width="180" align="center">
                </el-table-column>
                <el-table-column prop="phone" label="手机号码" align="center">
                </el-table-column>
                <el-table-column prop="nickname" label="用户名" align="center">
                </el-table-column>
                <el-table-column prop="createTime" label="日期" align="center">
                </el-table-column>
                <el-table-column prop="enabled" label="状态" align="center">
                    <template slot-scope="scope">
                        {{scope.row.enabled? '启用' :'已禁用'}}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width='300px' align="center">
                    <template slot-scope="scope">
                        <el-button type="warning"  type="text" size="mini" @click='reactfn(scope.row.id)'>重置密码</el-button>
                        <el-button type="danger" type="text" size="mini" v-if='scope.row.enabled ' @click='noclick(scope.row)'>禁用</el-button>
                        <el-button  type="success" type="text" size="mini" v-if='!scope.row.enabled' @click='opend(scope.row)'>启用</el-button>
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click='redit(scope.row)'></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-size="pagesize" layout="total, prev, pager, next, jumper"
                :total="totalCount"></el-pagination>
        </div>
        <el-dialog title="修改人员" :visible.sync="dialogTableVisible2" width='430px' @close=close2>
            <el-form ref="form" :model="form3" label-width="120px">
                <el-form-item label="用户名">
                    <el-input v-model="form3.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form3.phone"></el-input>
                </el-form-item>
                <el-button type="primary" @click="save2" style="margin:0 auto;display:inherit">保存</el-button>
            </el-form>
        </el-dialog>
        <el-dialog title="添加人员" :visible.sync="dialogTableVisible" width='430px' @close=close>
            <el-form ref="form" :model="form2" label-width="120px">
                <el-form-item label="账号：">
                    <el-input v-model="form2.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号码：">
                    <el-input v-model="form2.phones" maxlength='11'></el-input>
                </el-form-item>
                <el-form-item label="用户名：">
                    <el-input v-model="form2.input"></el-input>
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input v-model="form2.password" type='password'></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="save" style="margin:0 auto;display:inherit">确定</el-button>
        </el-dialog>
    </div>
</body>
<!-- import Vue before Element -->
<script type="text/javascript" src="../js/jquery-3.5.0.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: '1',
                name: '',
                form: {
                    input: ''
                },
                tableData: [],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                dialogTableVisible: false,
                form2: {
                    input: '',
                    name: '',
                    phones:'',
                    password:''
                },
                multipleSelection: [],
                form3:{
                    name:'',
                    phone:''

                },
                dialogTableVisible2:false,
                id:''

            }
        },
        created() {
            this.init()
            this.name =  window.localStorage.getItem('admin')
        },
        methods: {
            init() {
                let self = this
                $.ajax({
                    type: "get",
                    url: `/linda/user/list?pageNum=${this.currentPage}&pageSize=${this.pagesize}&keyword=${this.form.input}`,
                    dataType: "json",
                    contentType: "application/json",
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            self.tableData = data.data.content
                            self.totalCount = data.data.total
                        } else {
                            console.log('出现错误')
                        }
                    },
                    error: function (jqXHR) {
                        alert("发生错误");
                    },
                });
            },
            close(){
                this.form2.input  = ''
                this.form2.name = ''
                this.form2.password = ''
                this.form2.phones = ''
            },
            logout(){
                let self = this
                $.ajax({
                    type: "get",
                    url: '/linda/logout',
                    dataType: "json",
                    contentType: "application/json",
                    // xhrFields: {
                    //     withCredentials: true
                    // },
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            window.location.href = '/load.html'
                            window.localStorage.removeItem('admin')
                        } else {
                            console.log('出现错误')
                        }
                    },
                    error: function (jqXHR) {
                        alert("发生错误");
                    },
                });
            },
            close2(){
                this.form3.name = '',
                this.form3.phone = ''
            },
            redit(val){
                this.dialogTableVisible2 = true
                this.form3.name = val.nickname,
                this.form3.phone = val.phone,
                this.id= val.id
            },
            onSubmit() {
                this.init()
            },
            opend(row){
                let self = this
                $.ajax({
                    type: "post",
                    url: '/linda/user/update/status',
                    dataType: "json",
                    contentType: "application/json",

                    data: JSON.stringify({
                        id: row.id,
	                    enabled: true
                    }),
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            self.$message({
                                message: '设置成功',
                                type: 'success'
                            })
                            self.init()
                        } else {
                            console.log('出现错误')
                        }
                    },
                    error: function (jqXHR) {
                        alert("发生错误");
                    },
                });
            },
            noclick(row){
                let self = this
                $.ajax({
                    type: "post",
                    url: '/linda/user/update/status',
                    dataType: "json",
                    contentType: "application/json",

                    data: JSON.stringify({
                        id: row.id,
	                    enabled: false
                    }),
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            self.$message({
                                message: '设置成功',
                                type: 'success'
                            })
                            self.init()
                        } else {
                            console.log('出现错误')
                        }
                    },
                    error: function (jqXHR) {
                        alert("发生错误");
                    },
                });
            },
            reactfn(id){
                let self = this
                
                $.ajax({
                    type: "post",
                    url: `/linda/user/reset?id=${id}`,
                    dataType: "json",
                    contentType: "application/json",
                    // xhrFields: {
                    //     withCredentials: true
                    // },
                   
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            self.$message({
                                message: '设置成功',
                                type: 'success'
                            })
                            self.init()
                        } else {
                            self.$message.error(data.message)
                        }
                    },
                    error: function (jqXHR) {
                        alert("发生错误");
                    },
                });
            },
            deletefn() {
                let self = this
                
                if (self.multipleSelection.length == 0) {
                    self.$message({
                        message: '请选择要删除的内容',
                        type: 'warning'
                    })
                    return
                }
                let send=JSON.stringify(self.multipleSelection)
                self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
                    $.ajax({
                        type: "post",
                        url: '/linda/user/delete',
                        dataType: "json",
                        contentType: "application/json",
                        xhrFields: {
                            withCredentials: true
                        },
                        data: send,
                        success: function (data) {
                            if (data.code == 200) {
                                self.$message({
                                    message: '删除成功',
                                    type: 'success'
                                })
                                self.init()
                            } else {
                                self.$message.error(data.message)
                            }
                        },
                        error: function (jqXHR) {
                            alert("发生错误");
                        },
                    });
                })
                
            },
            add() {
                this.dialogTableVisible = true
            },
            //分页
            handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage
                this.init()
            },
            save() {
                
                let self = this
                if(!self.form2.name){
                    self.$message({
                        message: '请输入账号',
                        type: 'warning'
                    })
                    return
                }else if(!self.form2.password){
                    self.$message({
                        message: '请输入密码',
                        type: 'warning'
                    })
                    return

                }else if(!self.form2.input){
                    self.$message({
                        message: '请输入用户名',
                        type: 'warning'
                    })
                    return

                }else if(!self.form2.phones){
                    self.$message({
                        message: '请输入手机号',
                        type: 'warning'
                    })
                    return
                }
                $.ajax({
                    type: "post",
                    url: '/linda/user/add',
                    dataType: "json",
                    contentType: "application/json",
                    // xhrFields: {
                    //     withCredentials: true
                    // },
                    data: JSON.stringify({
                        username: self.form2.name,
                        password: self.form2.password,
                        nickname: self.form2.input,
                        phone: self.form2.phones
                    }),
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            self.dialogTableVisible = false
                            self.init()
                        } else {
                            self.$message.error(data.message)
                        }
                    },
                    error: function (jqXHR) {
                        alert("发生错误");
                    },
                });
            },
            save2(){
                let self = this
                if(!self.form3.name){
                    self.$message({
                        message: '请输入用户名',
                        type: 'warning'
                    })
                    return
                }else if(!self.form3.phone){
                    self.$message({
                        message: '请输入手机号',
                        type: 'warning'
                    })
                    return
                }
                $.ajax({
                    type: "post",
                    url: '/linda/user/update',
                    dataType: "json",
                    contentType: "application/json",
                    // xhrFields: {
                    //     withCredentials: true
                    // },
                    data: JSON.stringify({
                        id: this.id,
                        nickname: this.form3.name,
                        phone: this.form3.phone
                    }),
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            self.$message({
                                message: '修改成功',
                                type: 'success'
                            })
                            self.dialogTableVisible2 = false
                            self.init()
                        } else {
                            self.$message.error(data.message)
                        }
                    },
                    error: function (jqXHR) {
                        alert("发生错误");
                    },
                });
            },
            handleSelectionChange(val) {
                let self = this
                let valArr = []
                for (let i = 0; i < val.length; i++) {
                        valArr.push(val[i].id)
                    }
                    self.multipleSelection = valArr
                }
                
        },
    })
</script>

</html>